<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
    @open="getData"
  >
    <div class="formTitle-root">
      <div class="form-title-p">指标信息</div>
    </div>
    <VForm
      ref="vformComponents"
      :form="formData.form"
      :options="formData.options"
      :rules="formData.rules"
      :labelWidth="formData.labelWidth"
      :rowspan="rowspan"
    ></VForm>

    <!--<div class="formTitle-root">-->
      <!--<div class="form-title-p">预警规则</div>-->
    <!--</div>-->
    <!--<v-table-->
      <!--style="margin-bottom: 20px"-->
      <!--:table-columns="tableRuleColumns"-->
      <!--:table-data="tableRuleData"-->
      <!--:is-index="true"-->
      <!--:isDynamicCol="false"-->
      <!--ref="table">-->
    <!--</v-table>-->

    <div class="formTitle-root">
      <div class="form-title-p">指标结果信息</div>
       <el-radio-group v-model="indicationType" style="margin-bottom: 10px;margin-top:10px;" size="mini" @change="selectIndicationType">
        <el-radio-button label="0">数表</el-radio-button>
        <el-radio-button label="1">地图</el-radio-button>
      </el-radio-group>
    </div>
    <v-table v-if="indicationType == 0"
      style="margin-bottom: 20px"
      :table-columns="tableResultColumns"
      :table-data="tableResultData"
      :is-index="false"
      :isDynamicCol="false"
      ref="table">
    </v-table>

    <div class="indicationResult"  v-if="indicationType == 1">
      <OpenlayersMap  />    
      <LegendMap :list="legendList" />
    </div>


    <div class="formTitle-root"  v-if="showHistoryChars">
      <div class="form-title-p">指标结果历年对比</div>
    </div>
    <div v-if="showHistoryChars">
      <div id ="charts" style="height: 400px; width: 100%"></div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">返 回</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { indicatorDiagnosisDetail,indicatorDiagnosisHistory } from '@/api/risk/cityWaringResult'
  import VForm from "@/components/VForm/index";
  import VTable from '@/components/VTable/index'
  import echarts from "echarts";
  import OpenlayersMap from '@/components/openlayersMap/openlayersMap.vue';
  import iconRed from "@/assets/map/column-red.png";
  import iconYellow from "@/assets/map/column-yellow.png";
  import iconGreen from "@/assets/map/column-green.png";
  import iconGray from "@/assets/map/column-grey.png";
  import LegendMap from '@/components/openlayersMap/legendMap.vue';
  export default {
    components: {
      VForm,
      VTable,
      OpenlayersMap,
      LegendMap
    },
    props: {
      width: {
        type: String,
        default: "70%",
      },
      title: {
        type: String,
        default: "详情",
      },
      threeTargetNo:{},
      year:{},
      resultType:{},
      openType:{
        type:String,
        default:"add"
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      cityCheckTypeOptions:{},
      showHistoryChars:{
        type:Boolean,
        default:false
      }
    },
    watch: {
      'width': {
        handler(newVal, oldVal) {
          console.log('newVal===',newVal, oldVal)
          let w = this.width.split('%')[0]
          if(w>=60){
            this.rowspan = 2
          }else{
            this.rowspan = 1
          }
        },
        deep: true,
        immediate: true
      },
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
        }
      }
    },
    data() {
      return {
        cityCheckResultTypeOptions:[],
        cityCheckResultDict:{},
        tableRuleData:[],
        tableRuleColumns:[
          {
            prop: 'low',
            label: '下限',
            minWidth: '150',
            slotname: 'low',
            options: {}
          },
          {
            prop: 'top',
            label: '上限',
            minWidth: '150',
            slotname: 'top',
            options: {}
          },
          {
            prop: 'result',
            label: '评价结果',
            minWidth: '150',
            slotname: 'result',
            options: {}
          },
        ],
        tableResultData:[],
        tableResultColumns:[
          {
            prop: 'name',
            label: '评价结果',
            minWidth: '100',
            slotname: 'name',
            options: {}
          },
          {
            prop: 'percent',
            label: '所占比例',
            minWidth: '100',
            slotname: 'percent',
            options: {}
          },
          {
            prop: 'city',
            label: '指标城市',
            minWidth: '180',
            slotname: 'city',
            options: {}
          },
        ],
        rowspan:2,
        dict:{},
        formData: {
          form: {
            cityName:"",
            cityCode:"",
            year:"",
            batchNum:"",
            areaCode:"",
            areaName:"",
            oneTargetName:"",
            oneTargetNo:"",
            twoTargetName:"",
            twoTargetNo:"",
            threeTargetName:"",
            threeTargetNo:"",
            value:"",
            resultType:"",
            result:"",
            getTime:"",
            source:"",
          },
          options: [
            {
              title: "体检指标名称",
              key: "threeTargetName",
              type: "text",
              disabled: true
            },
            {
              title: "体检分类",
              key: "checkType",
              type: "text",
              disabled: true
            },
            {
              title: "指标大类",
              key: "oneTargetName",
              type: "text",
              disabled: true
            },
            {
              title: "指标细类",
              key: "twoTargetName",
              type: "text",
              disabled: true
            },
            {
              title: "指标解释",
              key: "targetDescribe",
              type: "text",
              disabled: true
            },
            {
              title: "评价结果类型",
              key: "resultType",
              type: "text",
              disabled: true
            },
          ],
          rules: {
          },
          labelWidth: "140px",
        },
        indicationType:0,
        areaResultList:[],
        legendList:[
          {color:'#0ccdcd',name:'优秀'},
          {color:'#c7a000',name:'良好'},
          {color:'gray',name:'一般'},
          {color:'#b23700',name:'预警'},
        ]
      };
    },
    watch: {
      'cityCheckResultTypeOptions':{
        handler(newVal, oldVal) {
          if(newVal){
            this.cityCheckResultTypeOptions.forEach(t=>{
              this.cityCheckResultDict[t.name] = []
              this.$commonJs.filterDataDict(t.name, this.cityCheckResultDict[t.name])
            })
          }
        },
        deep: true,
        immediate: true
      },
      'cityList':{
        handler(newVal, oldVal){
          if(newVal){
            this.searchData.options.forEach(t=>{
              if(t.key == 'cityCode'){
                t.option.data = newVal
              }
            })
          }
        }
      }
    },
    methods: {
      draw(drawData){
        if (!document.getElementById("charts")) {
          console.warn("初始化echarts dom标签未找到");
          return;
        }
        let myChart = echarts.init(document.getElementById("charts"));
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: drawData.x
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value} %' //设置单位为百分比
              },
              name: "单位：百分比（%）",
            }
          ],
          series: drawData.y.map(t=>{
            return {
              name:this.getDictValue(t.value, this.cityCheckResultDict[this.resultType]),
              type: 'bar',
              stack: 'Ad',
              emphasis: {
              focus: 'series'
            },
              data: t.data
            }
          }),
          // series: [
          //   {
          //     name: 'Email',
          //     type: 'bar',
          //     stack: 'Ad',
          //     emphasis: {
          //       focus: 'series'
          //     },
          //     data: [120, 132, 101, 134, 90, 230, 210]
          //   },
          //   {
          //     name: 'Union Ads',
          //     type: 'bar',
          //     stack: 'Ad',
          //     emphasis: {
          //       focus: 'series'
          //     },
          //     data: [220, 182, 191, 234, 290, 330, 310]
          //   },
          //
          // ]
        };
        myChart.setOption(option);
      },
      cancel(){
        this.close()
      },
      handleClose(done) {
        done()
        this.close()
      },
      close(){
        this.$emit('close')
      },
      selectIndicationType(e){
        console.log('selectIndicationType==',e)
        if(e == 1){
           this.eventBus.$emit("setMarkersMaps",this.areaResultList)
        }
      },
      loadFormat(data){
        console.log('loadFormat========')
        // 规则
        // this.tableRuleData = data.rules ? JSON.parse(data.rules) :[]
        this.tableRuleData.forEach(t=>{
          t.result = this.getResultLabel(data.resultType,t.result)
        })
        this.tableResultData = data.resultList
        this.formData.form.checkType =  this.getDictValue(data.checkType, this.cityCheckTypeOptions)
        this.formData.form.resultType =  this.getDictValueType(data.resultType, this.cityCheckResultTypeOptions)
        let areaResultList = data.areaResultList
        areaResultList = areaResultList.map((item, index) => {
                            return {
                                ...item,
                                id: index + 1,
                                icon:
                                    item.result == 1
                                        ? iconRed
                                        : item.result == 2
                                            ? iconGray
                                            : item.result == 3?iconYellow : iconGreen,
                                posX: item.lon,
                                posY: item.lat,
                                // text: item.num.toString(),
                                scales: 1,
                                iconType: 'alarm',//必填，用于筛选类型
                                iconTypeName: 'bar'//必填，用于判断点击的是柱子还是撒点
                            }
                        });
        this.areaResultList = areaResultList
        this.eventBus.$emit("setMarkersMaps",this.areaResultList)
       
      },
      getResultLabel(resultType,result){
        return this.getDictValue(result, this.cityCheckResultDict[resultType])
      },
      getDictValueType(value,option){
        let item = option.find(t=> t.name == value)
        if(item!=undefined){
          return item.label
        }
        return value
      },
      getDictValue(value,option){
        let item = option.find(t=> t.value == value)
        if(item!=undefined){
          return item.label
        }
        return value
      },
      getData(){
        console.log('getData=====open====')
        if(this.openType!="add"){
          indicatorDiagnosisDetail({threeTargetNo:this.threeTargetNo, year:this.year, resultType:this.resultType}).then(res=>{
            if(res.code==200){
              this.formData.form = res.data
              this.loadFormat(res.data)
            }else{
              this.$message({
                message: this.$t('tips.systemException'),
                type: 'error'
              })
            }
          })
        }
        this.cityCheckResultTypeOptions = []
        this.$commonJs.filterDataDict("cityCheckResultType",this.cityCheckResultTypeOptions)
        if(this.showHistoryChars){
          this.$nextTick(() => {
            indicatorDiagnosisHistory({
              threeTargetNo:this.threeTargetNo,
              year:this.year,
              resultType:this.resultType}).then(res=>{
              if(res.code==200){
                this.draw(res.data)
              }
            })
          })
        }
      }
    },
  };
</script>

<style lang="scss" scoped>
  @import "@/styles/element-variables.scss";
  .formTitle-root{
    padding: 10px 0;
    /*border-bottom: 1px solid #EFEFEF;*/
    font-size: 16px;
    position: relative;
    margin-bottom: 5px;
    .form-title-p{
      padding-left: 10px;
      border-left: 4px solid $--color-primary;
    }
  }
  .indicationResult{
    width: 100%;
    height: 500px;
    position: relative;
  }
</style>
